<template>
  <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
    <el-table :data="data"
      :border="option.border"
      :height="option.height"
      :max-height="option.maxHeight"
      :style="{ width: parseInt(option.width)+'px' }"
      :cell-class-name="cellClassName" 
      :header-cell-class-name="headerCellClassName"
    >
    <!-- 固定位置的列,不希望被移动位置 -->
      <slot name="fixed"></slot>
      <!-- 表头其他元素 -->
      <el-table-column v-for="(col, index) in tableHeader" :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :min-width="col.minWidth"
        :type="col.type"
        :header-align="col.headerAlign"
        :column-key="index.toString()"
        :render-header="renderHeader"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
     props: {
    data: {
      default: function () {
        return []
      },
      type: Array
    },
    header: {
      default: function () {
        return []
      },
      type: Array
    },
    option: {
      default: function () {
        return {}
      },
      type: Object
    }
  },
   data () {
    return {
      tableHeader: this.header,
      dragState: {
        start: -9, // 起始元素的 index
        end: -9, // 移动鼠标时所覆盖的元素 index
        dragging: false, // 是否正在拖动
        direction: undefined // 拖动方向
      }
    }
  },
  watch: {
    header (val, oldVal) {
      this.tableHeader = val
    }
  },
  methods:{
    // 表头渲染函数
    renderHeader (createElement, {column}) {
      return createElement(
        'div', {
          'class': ['thead-cell'],
          on: {
            mousedown: ($event) => { this.handleMouseDown($event, column) },
            mousemove: ($event) => { this.handleMouseMove($event, column) }
          }
        }, [
          // 添加 <a> 用于显示表头 label
          createElement('a', column.label),
          // 添加一个空标签用于显示拖动动画
          createElement('span', {
            'class': ['virtual']
          })
        ]
      )
    },
    // 按下鼠标开始拖动
    handleMouseDown (e, column) {
      // 改变拖动状态
      this.dragState.dragging = true
      // 当前列索引,string类型,0开始
      this.dragState.start = parseInt(column.columnKey)
      // 给拖动时的虚拟容器添加宽高
      let table = document.getElementsByClassName('w-table')[0]
      let virtual = document.getElementsByClassName('virtual')
      for (let item of virtual) {
        item.style.height = table.clientHeight - 1 + 'px'
        item.style.width = item.parentElement.parentElement.clientWidth + 'px'
      }
    　document.addEventListener('mouseup', this.handleMouseUp);
    },

    // 鼠标放开结束拖动
    handleMouseUp () {
      this.dragColumn(this.dragState)
      // 初始化拖动状态
      this.dragState = {
        start: -9,
        end: -9,
        dragging: false,
        direction: undefined
      }
    　document.removeEventListener('mouseup', this.handleMouseUp);
    },

    // 拖动中
    handleMouseMove (e, column) {
      if (this.dragState.dragging) {
        let index = parseInt(column.columnKey) // 记录起始列
        if (index - this.dragState.start !== 0) {
          this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
          this.dragState.end = parseInt(column.columnKey)
        } else {
          this.dragState.direction = undefined
        }
      } else {
        return false
      }
    },

    // 拖动易位
    dragColumn ({start, end, direction}) {
      let tempData = []
      let left = direction === 'left'
      let min = left ? end : start - 1
      let max = left ? start + 1 : end
      for (let i = 0; i < this.tableHeader.length; i++) {
        if (i === end) {
          tempData.push(this.tableHeader[start])
        } else if (i > min && i < max) {
          tempData.push(this.tableHeader[ left ? i - 1 : i + 1 ])
        } else {
          tempData.push(this.tableHeader[i])
        }
      }
      this.tableHeader = tempData
    },
    headerCellClassName ({column, columnIndex}) {
        let active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
        let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ''
        return `${active} ${start}`
    },

    cellClassName ({column, columnIndex}) {
      return (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
    }
  }

}
</script>
